<template>
    <el-form ref="form" label-width="80px" class="mt">
        <el-form-item label="开单客户">
            <div style="height:62px">
                <div style="width:400px; float: left" v-show="ginfo.id">
                    <el-card :body-style="{ padding: '10px' }"  shadow="hover">
                        <el-row>
                            <div style="float: left;height: 60px;margin-right: 10px">
                                <img :src="ginfo.headurl" style="border-radius: 50%; width: 50px; height:50px;padding: 5px">
                            </div>
                            <div style="float: left;height: 60px;">
                                <p style="margin: 0px; height: 30px">
                                    <span @click="openGuestPage(ginfo.id)" style="cursor:pointer;color:#f50">{{ginfo.name}}</span>
                                    <span style="margin-left: 10px;font-size: 13px;color: #999;">{{ginfo.phone}}</span>
                                </p>
                                <p style="margin: 0px; height: 30px">
                                    vip：<span style="font-size: 13px;color: #999;">{{ginfo.vipcard}}</span> 产品折扣：
                                    <span style="font-size: 13px;color: #999;">{{ginfo.goodsdiscount}}</span> 项目折扣：
                                    <span style="font-size: 13px;color: #999;">{{ginfo.subjectdiscount}}</span>
                                </p>
                            </div>
                        </el-row>
                    </el-card>
                </div>
            </div>
        </el-form-item>
        <el-form-item label="开单列表">
            <el-row>
                <el-table :data="orderlist" :height="380" show-summary :summary-method="sumorderlist" border :row-key="getrowid" :expand-row-keys="expands">
                    <el-table-column prop="userTypeList" label="" width="50" type="expand">
                        <template slot-scope="scope">
                            <div style="display: flex">
                            <div style="display: flex;height: 34px;border: 1px solid #ebeef5;margin-right: 10px" v-for="(ite,ind) in scope.row.userTypeList">
                                <span style="padding: 0 10px;text-align: center;font-weight: 700;color: rgb(144, 147, 153);">{{ite.name}}</span>
                                
                                <el-input disabled class="table-line-input" size="small" style="border-left:1px solid rgb(235, 238, 245);width: 100px" :value="ite.username">
                                </el-input>

                                <el-input disabled class="table-line-input" size="small" style="border-left: 1px solid rgb(235, 238, 245);width:60px" :value="ite.fuwutype|fuwuType"></el-input>

                                <div style="border-left: 1px solid rgb(235, 238, 245);position: relative;">
                                    <el-popover placement="right" width="280">
                                        <div style="display: flex; flex-direction: column;width: 280px;">
                                        <div style="height: 100%;overflow: scroll;margin-top: 10px">
                                            <div style="display: flex;align-items: center;justify-content: space-between;line-height: 30px;margin-left: 5px;" v-for="(items, index) in ite.userFenList">
                                                <span style="max-width: 125px;overflow: hidden;height: 30px">{{ items.worknum }} - {{ items.name }}</span>
                                                <div>
                                                <span class="table-line-input" size="small" style="width: 40px;height: 24px;outline: none;margin-right: 5px;border-radius: 3px;text-align: center;padding: 5px;">{{items.fuwutype|fuwuType}}</span>
                                                <input @keyup="changePercent(ite.userFenList, items)" style="width: 40px;height: 24px;outline: none;margin-right: 5px;border-radius: 3px;border: 1px solid #dcdfe6;text-align: center;"  v-model="items.percent" type="text" disabled/>
                                                </div>
                                            </div>
                                        </div>
                                        </div>
                                        <i slot="reference" class="el-icon-plus" style="line-height: 32px;cursor: pointer;color: rgb(144, 147, 153);font-size:13px;padding: 0 10px;"></i>
                                    </el-popover>
                                    <span style="position: absolute;top: -10px;right: -10px;background: red;color: #fff;border-radius: 50%;width: 20px;height: 20px;text-align: center;line-height: 20px;box-shadow: 0 0 11px 2px #cecece;" v-show="ite.userFenList && ite.userFenList.length > 1">{{(ite.userFenList && ite.userFenList.length)}}</span>
                                </div>
                            </div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column type="index" label="序号" width="50"></el-table-column>
                    <el-table-column prop="type" label="品项类型" width="80">
                        <template slot-scope="scope">
                            <el-tag size="mini" type="success" v-if="scope.row.type == 1">产品</el-tag>
                            <el-tag size="mini" type="primary" v-else>项目</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="typename" label="品项名称" width="130" :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column prop="consumetype" label="消费类型">
                        <template slot-scope="scope">
                            <el-tag size="mini" type="success" v-if="scope.row.consumetype == 1">普通消费</el-tag>
                            <el-tag size="mini" type="danger" v-else-if="scope.row.consumetype == 2">卡项消费</el-tag>
                            <el-tag size="mini" type="gray" v-else>暂存消费</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="cardname" label="所属卡"></el-table-column>
                    <el-table-column prop="price" label="原价"></el-table-column>
                    <el-table-column prop="num" label="数量" width="50">
                    </el-table-column>
                    <el-table-column prop="discount" label="折扣" width="50">
                    </el-table-column>
                    <el-table-column prop="amount" label="小计" width="80">
                    </el-table-column>
                    <el-table-column prop="usemoney" label="现金">
                    </el-table-column>
                    <el-table-column prop="usebalance" label="余额">
                    </el-table-column>
                    <el-table-column prop="usegiftbalance" label="赠送余额">
                    </el-table-column>
                    <el-table-column prop="usecard" label="卡付">
                    </el-table-column>
                    <el-table-column prop="isgift" label="赠">
                        <template slot-scope="scope">
                            <el-input style="width:50px" :value="returnValue(scope, trueOrFalse)" size="small" disabled></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column prop="istemp" label="存">
                        <template slot-scope="scope">
                            <el-input style="width:50px" :value="returnValue(scope, trueOrFalse)" size="small" disabled></el-input>
                        </template>
                    </el-table-column>
                </el-table>
            </el-row>
        </el-form-item>
        <el-form-item label="开单描述">
            <el-input type="textarea" v-model="order.remarks" placeholder="请输入开单描述，方便了解该订单。（可忽略）" disabled></el-input>
        </el-form-item>
    </el-form>
</template>
<script>
import C from '@/common/common.js'
import D from '@/service/common/datas.js'
import keyUpRef from '@/service/shop/keyupref.js'
import Guest from '@/service/shop/guest.js'
export default {
  name: 'orderinfo',
  props: ['order', 'orderlistprops', 'ginfoprops'],
  data () {
    return {
      trueOrFalse: D.trueOrFalse,
      fuwuType: D.fuwuType,
      ginfoid: 1
    }
  },
  methods: C.assign(keyUpRef, {
    returnValue (scope, data) {
      for (var i = data.length - 1; i >= 0; i--) {
        if (scope.row[scope.column.property] == data[i].value) {
          return data[i].name
        }
      }
      return ''
    },
    checkUserValue (e, typeid) {
      console.log(typeid)
      this.fuwuType.forEach(row => {
        if (row.value === typeid) {
          e.target.value = row.name
        }
      })
    },
    getrowid (row) {
      return 'rowtype' + row.rowtype + 'type' + row.type + 'typeid' + row.typeid + 'guestcardinfoid' + row.guestcardinfoid
    },
    sumorderlist: function (param) {
      const { columns, data } = param
      const sums = []
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计'
          return
        }
        if (index == 6 || index == 10 || index == 11 || index == 12 || index == 13 || index == 9) {
          const values = data.map(item => Number(item[column.property]))
          if (!values.every(value => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr)
              if (!isNaN(value)) {
                return prev + curr
              } else {
                return prev
              }
            }, 0)
            sums[index] = sums[index].toFixed(2)
          } else {
            sums[index] = 'N/A'
          }
        }
      })
      return sums
    },
    openGuestPage (id) {
      Guest.openGuestPage(id)
    }
  }),
  computed: {
    expands: function () {
      let list = []
      this.orderlist.forEach((row) => {
        if (row.userTypeList && row.userTypeList.length > 0) {
          list.push('rowtype' + row.rowtype + 'type' + row.type + 'typeid' + row.typeid + 'guestcardinfoid' + row.guestcardinfoid)
        }
      })
      return list
    },
    orderlist () {
      return this.orderlistprops
    },
    ginfo () {
      return this.ginfoprops
    }
  },
  mounted: async function () {
  }
}
</script>